<template>
  <!--
  查：
   1：定义api
   2:导入api
   3:进入页面请求api
   4：存储数据并渲染
   5：和分页建立关联
  增：
   1：创建新增弹框组件
   2：在父组件导入注册使用
   3：点击新增打开弹框
   4：完成弹框布局
   5：完成弹框内的表单验证
   6：定义新增api
   7:导入新增api
   8:点击确定在表单验证通过后调用api
   9:调用成功：
      a:关闭弹框
      b:清空表单内容
      c:提示
      d:刷新父级列表数据
  删
    1：点击删除弹出确定框
    2：定义删除api
    3:导入删除api
    4:点击确定框确定调用删除api
    5:调用成功
       a:提示
       b:刷新列表数据
 -->
  <div class="departments">
    <el-card>
      <div class="main">
        <div class="top mb20">
          <div class="name">传智教育</div>
          <div class="manager">负责人</div>
          <el-dropdown>
            <div>
              <span>操作</span>
              <i class="el-icon-arrow-down" />
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click.native="addEvent('')">添加子部门</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <el-tree v-loading="loading" :data="list">
          <template v-slot="{data}">
            <div class="top">
              <div class="name">{{ data.name }}</div>
              <div class="manager">{{ data.manager }}</div>
              <el-dropdown>
                <div>
                  <span>操作</span>
                  <i class="el-icon-arrow-down" />
                </div>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click.native="addEvent(data.id)">添加子部门</el-dropdown-item>
                    <el-dropdown-item @click.native="editEvent(data)">编辑部门</el-dropdown-item>
                    <el-dropdown-item @click.native="delEvent(data.id)">删除部门</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>
        </el-tree>
      </div>
    </el-card>
    <!-- 新增弹框 -->
    <Add ref="add" :init-list="initList" @getData="getData" />
  </div>
</template>
<script>
import { companyDepartment, companyDepartmentDelete } from '@/api/departments'
import Add from './components/Add.vue'
import lodash from 'lodash'
export default {
  components: {
    Add
  },
  data() {
    return {
      list: [],
      initList: [],
      loading: false
    }
  },
  async created() {
    this.getData()
  },
  methods: {
    // 获取组织架构列表
    async getData() {
      this.loading = true
      const res = await companyDepartment()
      this.initList = res.data.depts
      this.list = this.changeData(res.data.depts, '')
      this.loading = false
      // console.table(res.data.depts)
    },
    // 树形数据转换
    changeData(arr, pid) {
      return arr.filter(item => {
        if (item.pid === pid) {
          item.children = this.changeData(arr, item.id)
          return true
        }
      })
    },
    // 新增点击
    addEvent(str) {
      // 打开弹框
      this.$refs.add.show = true
      // 修改弹框组件form内的pid
      this.$refs.add.form.pid = str
      // 修改mode场景值
      this.$refs.add.mode = 'add'
    },
    // 删除点击
    async delEvent(id) {
      await this.$confirm('您确定删除该项吗?', '提示')
      await companyDepartmentDelete(id)
      this.$message.success('删除部门成功')
      this.getData()
    },
    // 编辑点击
    editEvent(row) {
      // 打开弹框
      this.$refs.add.show = true
      // 数据回显
      // this.$refs.add.form = JSON.parse(JSON.stringify(row))
      this.$refs.add.form = lodash.cloneDeep(row)
      // 修改mode场景值
      this.$refs.add.mode = 'edit'
      console.log('row', row)
    }
  }
}
</script>
<style lang="scss" scoped>
.departments{
  padding: 20px;
  .main{
    width:80%;
    margin:0 auto;
    padding:50px 0;
    .top{
      width:100%;
      display: flex;
      align-items: center;
      .name{
        flex:1;
      }
      .manager{
        width:120px;
      }
    }
  }
  .mb20{
    margin-bottom:10px;
  }
}
</style>
